<template>
  <view style="width: 100%; min-height: 100vh; position: relative;">
    <view style="width: 100%; padding: 0 20upx;">
      <view style="font-size: 26upx; color: #666666; padding: 32upx 0;">问题描述</view>
      <view style="position: relative;">
        <view class="article-content-text">
          <textarea class="article-content-title" placeholder="请描述您遇到的问题，以便我们为您提供更好的服务。" style="color: #666666;" v-model="problem_content" :maxlength="300"/>
        </view>
        <view class="amount-box">[{{problem_content.length}}/
          <text style="color: rgba(181, 0, 0, 1.0);">300</text>
          ]</view>
      </view>
      <view class="flex align-center" style="width: 100%; height: 90upx; font-size: 26upx; color: #666666;">
        图片（选填，提供问题截图）
      </view>
      <view class="flex flex-wrap">
        <view class="flex"
              style="width: 160upx; height: 160upx; border-radius: 10upx; margin: 0 10upx 10upx 0; position:relative;"
              v-for="(item,index) in publish_imgs" :key="index">
          <image :src="item" mode="aspectFill" style="width: 160upx; height: 160upx;"></image>
          <image src="/static/icon/comments/shanchu@2x.png" @click="handleDeleteImg(index)"
                 style="width: 28upx; height: 28upx; position:absolute; top: -8upx; right: -8upx; border-radius: 50%;"></image>
        </view>
        <view v-if="publish_imgs.length<5" class="flex" @click="handleUploadImg()">
          <image src="/static/image/add_imgs4@2x.png" style="width: 160upx; height: 160upx;"></image>
        </view>
      </view>
      <view class="flex align-center" style="width: 100%; height: 90upx; font-size: 26upx; color: #666666;">
        联系电话
      </view>
      <input type="number" maxlength="11" v-model="phonenum" placeholder="选填，便于我们与您联系。" style="height: 64upx; line-height: 64upx; padding-left: 26upx; font-size: 24upx; border: 2upx solid #F8F8F8;">
    </view>
    <view style="position: absolute; bottom: 128upx; padding: 0 76upx;">
      <view @click="handleSubmit()" class="flex align-center justify-center"
            style=" width: 596upx; height: 80upx; margin-bottom: 30upx; background-color: #E52718; color: white; font-size: 28upx; border-radius: 40upx;">
        提交
      </view>
    </view>
  </view>
</template>

<script>
import {getQiniuToken, chooseImage} from "utils/wxUtil";
import {feedback_giveOpinion} from "api/my/my"
export default {
  data(){
    return {
      problem_content: '', //问题内容
      title_maxlength: 30, //标题限字
      content_maxlength: 300, //内容限字
      phonenum: '', //电话号
      publish_imgs: [],//发布的图片
      upload_imgs: [], //上传图片
    }
  },
  methods:{
    //删除图片
    handleDeleteImg(index){
      this.publish_imgs.splice(index, 1);
    },
    //上传图片
    handleUploadImg() {
      chooseImage(5 - this.publish_imgs.length).then(res => {
        this.upload_imgs = res.image_array;
        this.publish_imgs = this.publish_imgs.concat(this.upload_imgs);
      })
    },
    //提交
    handleSubmit(){
      if(!this.problem_content){
        uni.showToast({
          title: '请填写问题描述',
          icon: 'none'
        })
        return;
      }
      let imgs = this.publish_imgs.join(',');
      feedback_giveOpinion({question_html: this.problem_content, imgs, phonenum: this.phonenum}).then(res=>{
        uni.showToast({
          title: '反馈成功',
          icon: 'none'
        })
        setTimeout(()=>{
          uni.navigateBack({
            delta: 1
          });
        },500)
      })
    }
  },
  onLoad(){
    getQiniuToken();
  }
}
</script>

<style scoped lang="less">
.article-content-text {
  width: 710upx;
  height: 372upx;
  border: 1px solid rgba(0,0,0,0.05);
}
.article-content-title {
  font-size: 24upx;
  padding: 18upx 20upx;
  width: 100%;
  height: 90%;
}
.amount-box {
  font-size: 22upx;
  color: rgba(153,153,153,1);
  position: absolute;
  bottom: 26upx;
  right: 16upx;
}
</style>
